@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.home{
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  .home-nav{
    .down-wrapper{
      padding-left: 25rpx;
      display: flex;
      align-items: center;
      .name-cu{
        color: #ffffff;
        font-size: 34rpx;
      }
      .down-img{
        width: 20rpx;
        height: 12rpx;
        margin-left: 10rpx;
      }
    }
  }
  .home-wrapper{
    flex: 1;
    position: relative;
    .top-wrapper{
      width: 750rpx;
      //position: absolute;
      //top: 0;
      //bottom: 405rpx;
       height: 57.796vh;
      position: relative;
      .l-bg{
        position: absolute;
        top: 35rpx;
        left: 0;
        width: 130rpx;
      }
      .r-bg{
        position: absolute;
        top: 44rpx;
        right: 0;
        width: 139rpx;
      }
      .lock{
        padding-top: 5.247vh;
        .lock-wrapper{
          position: relative;
          height: 28.861vh;
          width: 28.861vh;
          margin: 0 auto;
          .lock-close{
            width: 28.861vh;
            position: absolute;
            height: 28.861vh;
            animation: rotate 5s linear infinite;
          }
          .cen-img{
            width:  357rpx;
            height: 26.762vh;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
          }
        }
      }
      .button{
        width: 456rpx;
        height: 7.496vh;
        background-color: #ffffff;
        border-radius: 3.748vh;
        font-size: 30rpx;
        letter-spacing: 1rpx;
        color: #0167e2;
        line-height: 7.496vh;
        text-align: center;
        margin: 0 auto;
        margin-top: 4.498vh;
      }
      .world{
        font-size: 20rpx;
        color: #ffffff;
        text-align: center;
      }
    }
    .list-wrapper{
      position: absolute;
      display: flex;
      font-size: 24rpx;
      color: #272727;
      flex-wrap: wrap;
      bottom: 14.543vh;
      box-shadow: 	rgba(0, 0, 0, 0.1) -8px 0px 8px -8px, 	rgba(0, 0, 0, 0.1) 8px 0 8px -8px;
      width: 700rpx;
      left: 25rpx;
      background: #ffffff;
      padding-top: 3.973vh;
      border-radius: 40rpx 40rpx 0 0;
      .item{
        text-align: center;
        width: 25%;
        .text{
          line-height: 1;
        }
      }
      .item:nth-child(-n+4){
        margin-bottom: 4.873vh;
        .img{
          width: 6.747vh;
          height: 6.747vh;
          margin-bottom: 2.024vh;
        }
      }
      .item:nth-child(5){
        .img{
          width: 3.448vh;
          height: 3.148vh;
          margin-bottom: 2.024vh;
        }
      }
      .item:nth-child(6){
        .img{
          width: 2.624vh;
          height: 3.148vh;
          margin-bottom: 2.024vh;
        }
      }
      .item:nth-child(7){
        .img{
          width: 3.298vh;
          height: 3.073vh;
          margin-bottom: 2.024vh;
        }
      }
      .item:nth-child(8){
        .img{
          width: 3.073vh;
          height: 3.073vh;
          margin-bottom: 2.024vh;
        }
      }
    }
  }
  .cur{
    display: block !important;
    opacity: 1 !important;
  }
  .selected-community{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    transition: all 2s linear;
    opacity: 0;
  }
  .content-wrapper{
    position: fixed;
    top: 11.094vh;
    z-index: 100001;
    width: 710rpx;
    left: 20rpx;
    display: none;
    background-color: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 0rpx
    rgba(36, 31, 27, 0.08);
    border-radius: 14rpx;
    padding: 26rpx 34rpx 29rpx 34rpx;
    .top-title{
      font-size: 24rpx;
      color: #000000;
      font-weight: 500;
    }
    .list-community{
      margin-top: 25rpx;
      .community-item{
        padding: 10rpx 20rpx;
        background-color: #efefef;
        border-radius: 4px;
        font-size: 20rpx;
        color: #656565;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 20rpx;
        margin-right: 20rpx;
      }
    }
  }

  .attention {
    color: red;
    position: fixed;
    bottom: 100rpx;
    z-index: 1000;
    width: 100%;

    .image {
      position: absolute;
      right: 0;
      z-index: 1001;
      width: 50rpx;
      height: 50rpx;
      border: 1px solid red;
    }
  }
}

.visitor{
  .bg-visitor{
    width: 750rpx;
    height: 490rpx;
  }
  .banner-item{
    position: absolute;
    top: 411rpx;
    width: 700rpx;
    height: 161rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 0rpx 9rpx 0rpx
    rgba(1, 114, 231, 0.34);
    border-radius: 16rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 35rpx 0;
    .border{
      border-right: 1px solid #dbdbdb;
    }
    .item{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .item-img-wrapper{
        width: 90rpx;
        height: 90rpx;
        margin-right: 18rpx;
        position: relative;
        .item-img{
          width: 100%;
          height: 100%;
        }
        .circle{
          position: absolute;
          right: 0;
          top: 0;
          background-color: #f54f4f;
          height: 14px;
          width: 14px;
          font-size: 20rpx;
          color: #ffffff;
          font-weight: 500;
          text-align: center;
          line-height: 14px;
          border-radius: 50%;
        }
      }
      .text-r{
        font-size: 26rpx;
        color: #010101;
        font-weight: 500;
      }
    }
  }
  .wait{
    font-size: 28rpx;
    font-weight: 700;
    padding: 121rpx 25rpx 39rpx 25rpx;
  }
  .list-wrapper{
    width: 100%;
    height: 100%;

    .list-item-inner{
      padding: 0  25rpx;
      &:first-child{
        padding-top: 25rpx;
      }
      .list-item{
        background-color: #ffffff;
        box-shadow: 0rpx 2rpx 8.5rpx 0.5rpx
        rgba(188, 188, 192, 0.18);
        border-radius: 24rpx;
        padding: 38rpx 32rpx 59rpx 30rpx;
        margin-bottom: 25rpx;
        position: relative;
        .i-l{
          .t-name{
            font-size: 20rpx;
            color: #cfcfcf;
            margin-bottom: 14rpx;
          }
          .w-world{
            font-size: 28rpx;
            color: #000000;
            font-weight: 700;
          }
          .t-world{
            margin-bottom: 20rpx;
          }
        }
        .i-r{
          position: absolute;
          right: 32rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 150rpx;height: 150rpx
        }
        .i-r-btn{
          padding: 14rpx 36rpx;
          background-color: #e8f2ff;
          border-radius: 25rpx;
          font-size: 24rpx;
          color: #0768e2;
          position: absolute;
          right: 32rpx;
          top: 50%;
          transform: translateY(-50%);
        }
        .btn-ing{
          background-color: #fff8e8;
          color: #f0b62b;
        }
        .btn-overdue{
          background-color: #f4f4f4;
          color: #c1c1c1;
        }
      }
    }
  }
}